<!-- subpkg_medicine/payment/index.vue -->
<script lang="ts" setup>
import { addressListApi, preOrderApi } from '@/apis/order';
import type { Address, OrderPre } from '@/types/order';
import { ref } from 'vue';
import customPayment from '@/components/custom-payment/custom-payment.vue'
import { createOrderApi } from '@/apis/order'
import { orderPayApi } from '@/apis/consult';

// 1. 获取收货地址
const addressInfo = ref<Address>({} as Address)
const getAddressList = async () => {
  const addressList = await addressListApi()
  if (addressList.length > 0) {
    addressInfo.value = addressList[0]
    // 1.1 如果有默认地址
    addressList.forEach(item => {
      if (item.isDefault === 1) {
        addressInfo.value = item
      }
    })
  }
  // console.log(addressInfo.value);
}
getAddressList()

// 2. 根据处方的id获取预支付信息
// 获取处方的id
const props = defineProps<{
  id: string
}>()
// 预付订单信息
const preOrderInfo = ref({} as OrderPre)
const getPreOrderInfo = async () => {
  if (!props.id) return uni.showToast({ title: '没有处方id', icon: 'none' })
  const res = await preOrderApi(props.id)
  preOrderInfo.value = res
  console.log(preOrderInfo.value)
}
getPreOrderInfo()


// 3. 待支付订单ID
const orderId = ref('')
const paymentRef = ref()
const onSubmit = async () => {
  if (orderId.value === '') {
    const res = await createOrderApi(props.id, addressInfo.value.id)
    orderId.value = res.id
  }
  paymentRef.value.open()
}
const onConfirm = async (index: number) => {
  if (index === 0) return uni.showToast({ title: '暂时不支持微信支付', icon: 'none' })
  // 调用后端提供的支付接口
  const data = await orderPayApi({
    orderId: orderId.value,
    paymentMethod: index.toString(),
    payCallback: 'http://localhost:5173/#/subpkg_medicine/pay_result/index',
  })
  // 支付宝支付页面
  window.location.href = data.payUrl
}
const onClose = () => {
  paymentRef.value.close()
}

</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-shippment">
          <view class="region">
            <uni-icons size="16" color="#FF7702" type="location-filled" />
            {{ addressInfo.city }} {{ addressInfo.county }}
          </view>
          <view class="detail">{{ addressInfo.addressDetail }}</view>
          <view class="receiver"> {{ addressInfo.receiver }} {{ addressInfo.mobile }}</view>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view v-for="medicine in preOrderInfo.medicines" :key="medicine.id" class="medicine-list-item">
          <image class="medicine-cover" :src="medicine.avatar" mode="aspectFill" />
          <view class="medicine-info">
            <text class="name">{{ medicine.name }}</text>
            <text :class="{ symbol: medicine.prescriptionFlag === '1' }">
              {{ medicine.specs }}
            </text>
            <text class="price">¥{{ medicine.amount }}</text>
          </view>
          <view class="quantity">x{{ medicine.quantity }}</view>
          <view class="guide">用法用量：{{ medicine.usageDosag }}</view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="'¥' + preOrderInfo.payment" />
          <uni-list-item title="运费" :right-text="'¥' + preOrderInfo.expressFee" />
          <uni-list-item title="优惠券" show-arrow :right-text="'-¥' + preOrderInfo.couponDeduction" />
          <uni-list-item title="实付款" :right-text="'¥' + preOrderInfo.actualPayment" />
        </uni-list>
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <view class="total-amount">
          需付款: <text class="number">¥{{ preOrderInfo.actualPayment }}</text>
        </view>
        <view class="buttons">
          <button class="uni-button" @click="onSubmit">立即支付</button>
        </view>
      </view>
    </view>
  </scroll-page>
  <customPayment ref="paymentRef" :order-id="preOrderInfo.id" :amount="preOrderInfo.actualPayment" @confirm="onConfirm"
    @close="onClose" />
</template>

<style lang="scss">
@import './index.scss';
</style>